<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test1</title>
<style>
#main{
width:400px;
height:400px;
border:1px solid gray;
}
#drag1{
width:50px;
height:50px;
}
#drag1 img{
width:100%;
height:100%;
}
#drag2{
width:200px;
height:30px;
color:gray;
}
</style>
<script type="text/javascript" charset="utf-8">

function start(ev){//传递被拖动元素的id
ev.dataTransfer.setData("Text",ev.target.id);
}

function allowDrop(ev){
ev.preventDefault();
}

function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var left=ev.clientX;
var top=ev.clientY;
var main=document.getElementById("main");
var e=document.getElementById(data);
var newEle=e.cloneNode(true);
var type=e.tagName;

newEle.style.position="absolute";
newEle.style.left=left+"px";
newEle.style.top=top+"px";
newEle.id="new1";
main.appendChild(newEle);
if(main.children.length>1){
   for(var i=0;i<main.children.length-1;i++){
    
     if((main.children[i].tagName.toLowerCase()=="img"&&main.children[i].src=== newEle.src)||(main.children[i].tagName==newEle.tagName && newEle.tagName.toLowerCase()!="img")){
        alert("move");
		main.removeChild(main.children[i]);
		break;
	 }
   }
}

}
function enter(ev){
ev.preventDefault();
ev.dataTransfer.dropEffect="copy";
ev.dataTransfer.dropAllowed="all";
}

</script>
</head>

<body>
<div id="main" ondragover="allowDrop(event)" ondrop="drop(event)"  ondragenter="enter(event)" width="200px" height="200px"></div>

<img src="clothe.png" id="drag1" draggable="true" ondragstart="start(event)"/>
<input type="text" id="drag2" value="请输入您要添加的文字" draggable="true" ondragstart="start(event)"/>
</body>
</html>
